<template>
    <div>
        <!-- 表格部分 -->
        <QueryBase :show-search="false">
            <template #operation>
                <el-button type="primary" @click='handleAdd(null)'>添加菜单</el-button>
            </template>
            <el-scrollbar style="height:90%">
                <el-table :data='tableData' style='width:100%' :border="true" stripe row-key='function_no'
                    default-expand-all>
                    <el-table-column :align="index === 0 ? '' : 'center'" v-for='(item, index) in tableColumn'
                        :label='item.text' :prop="item.indexName">
                    </el-table-column>
                    <el-table-column label="操作" width='300px'>
                        <template #default="scope">
                            <el-link @click="handleAdd(scope.row)" style="padding-right: 5px;"><i
                                    class='iconfont icon-add'></i>添加子菜单</el-link>
                            <el-link @click="handleEdit(scope.row)" style="padding-right: 5px;"><i
                                    class='iconfont icon-bianji'></i>编辑</el-link>
                            <el-link @click="handleDelete(scope.row)" style="padding-right: 5px;"><i
                                    class='iconfont icon-shanchu'></i>删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </QueryBase>
        <!-- 编辑、添加菜单的弹出框 -->
        <el-dialog :title='dialogTitle' v-model='dialogFormVisible' width='40%' @close="closeDialog"
            :close-on-click-modal='false'>
            <div>
                <el-form :model="ruleForm" ref="menuForm" :label-width='labelWidth' :rules='rules'>
                    <!-- 有父级菜单时，可编辑子菜单的编号 -->
                    <el-form-item label="功能编号：" prop='son_selfNo' v-if='hadParent'>
                        <el-row>
                            <el-col :span="11">
                                <el-form-item>
                                    <el-input v-model="ruleForm.son_parentNo" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item>
                                    <el-input :disabled='isEdit' v-model="ruleForm.son_selfNo"
                                        placeholder="请输入子功能编号"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <!-- 没有父级菜单时 -->
                    <el-form-item label="功能编号：" prop='function_no' v-if='!hadParent'>
                        <el-input v-model='ruleForm.function_no' placeholder="请输入功能编号" :disabled='isEdit'></el-input>
                    </el-form-item>
                    <el-form-item label='功能名称：' prop='functionName'>
                        <el-input v-model='ruleForm.functionName' placeholder="请输入功能名称"></el-input>
                    </el-form-item>
                    <el-form-item label='功能链接：'>
                        <el-input v-model='ruleForm.functionUrl' placeholder="请输入功能链接"></el-input>
                    </el-form-item>
                    <el-form-item label='授权码：'>
                        <el-input v-model='ruleForm.action' placeholder="请输入授权码"></el-input>
                    </el-form-item>
                    <el-form-item label='排序编号：'>
                        <el-input v-model='ruleForm.sortnum' placeholder="请输入排序编号"></el-input>
                    </el-form-item>
                    <!-- 只有一级菜单才需要输入图标 -->
                    <el-form-item label='图标名称：' v-if='!hadParent'>
                        <el-input v-model='ruleForm.icon' placeholder="请输入图标名称"></el-input>
                    </el-form-item>
                    <!-- 主要是针对站外的路由 -->
                    <el-form-item label='链接target：'>
                        <el-radio-group v-model="ruleForm.target" :disabled="ruleForm.urlType === 'Router'">
                            <el-radio label="_blank">新窗口打开</el-radio>
                            <el-radio label="_self">当前窗口打开</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否展示：">
                        <el-radio-group v-model="ruleForm.functionShow">
                            <el-radio label="展示在菜单栏"></el-radio>
                            <el-radio label="不展示在菜单栏"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="功能类型：">
                        <el-radio-group v-model="ruleForm.urlType">
                            <el-radio label="Router">站内路由</el-radio>
                            <el-radio label="URI">外站链接</el-radio>
                        </el-radio-group>
                    </el-form-item>

                </el-form>
                <div style="padding: 20px;">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button type="info" @click="resetForm">取 消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { addMenu, deleteMenu, getMenu, updateMenu } from '@/api/authorization';
import comFunc from '@/common/comFunc';
import elHelper from '@/common/elHelper';
import QueryBase from '@/components/layout/QueryBase.vue';
import { reactive, ref } from 'vue';

const menuForm = ref()
const tableData = ref<MenuDataModel[]>([])
const tableColumn = ref([
    {
        text: '功能名称',
        indexName: 'function_name'
    },
    {
        text: '功能编号',
        indexName: 'function_no'
    },
    {
        text: '功能链接',
        indexName: 'function_url'
    },
    {
        text: '访问授权码',
        indexName: 'action'
    },
    {
        text: '排序编号',
        indexName: 'sort_num'
    }
])
const rules = reactive({
    function_no: [
        { required: true, message: '功能编号不能为空', trigger: 'blur' }
    ],
    son_selfNo: [
        { required: true, message: '功能编号不能为空', trigger: 'blur' }
    ],
    functionName: [
        {
            required: true, message: '功能名称不能为空', trigger: 'blur'
        }
    ]
})
const dialogTitle = ref('')
const dialogFormVisible = ref(false)
const ruleForm = reactive({
    son_parentNo: '',
    son_selfNo: '',
    function_no: '',
    functionName: '',
    functionUrl: '',
    functionShow: '不展示在菜单栏',
    sortnum: 0,
    action: '',
    urlType: 'Router',
    icon: '',
    target: '_blank'
})
const isEdit = ref(false)
const hadParent = ref(false)
const labelWidth = ref('124px')
const isShow = ref(false)
let pNo = ''
let fId = ''

const handleAdd = (row: MenuDataModel | null) => {
    dialogFormVisible.value = true
    isEdit.value = false
    ruleForm.functionName = ''
    ruleForm.functionUrl = ''
    ruleForm.action = ''
    ruleForm.sortnum = 0
    ruleForm.functionShow = '展示在菜单栏'
    ruleForm.icon = ''
    ruleForm.target = '_self'
    if (row) {
        dialogTitle.value = '添加子菜单'
        hadParent.value = true
        ruleForm.son_parentNo = comFunc.nvl(row.function_no)
        ruleForm.son_selfNo = ''
        ruleForm.urlType = comFunc.nvl(row.url_type)
    } else {
        dialogTitle.value = '新增功能菜单'
        hadParent.value = false
        ruleForm.function_no = ''
        ruleForm.urlType = 'Router'
    }
}
const handleEdit = (row: MenuDataModel) => {
    dialogFormVisible.value = true
    isEdit.value = true
    dialogTitle.value = '编辑功能菜单'
    ruleForm.functionName = comFunc.nvl(row.function_name)
    ruleForm.functionUrl = comFunc.nvl(row.function_url)
    ruleForm.action = comFunc.nvl(row.action)
    ruleForm.sortnum = row.sort_num as number
    ruleForm.urlType = comFunc.nvl(row.url_type)
    ruleForm.icon = comFunc.nvl(row.icon)
    ruleForm.target = comFunc.nvl(row.target)
    checkParent(row)
    if (row.is_menu) {
        ruleForm.functionShow = '展示在菜单栏'
    } else {
        ruleForm.functionShow = '不展示在菜单栏'
    }
}
const handleDelete = async (row: MenuDataModel) => {
    const c = await elHelper.showConfirmMsg('此操作将永久删除该菜单, 是否继续?')
    if (c) {
        const loading = elHelper.showLoading()
        const re = await deleteMenu(comFunc.nvl(row.function_no))
        if (re.isSuccess) {
            elHelper.showSuccessMsg('删除成功,请刷新页面,以更新左边菜单')
        } else {
            elHelper.showErrorMsg(re.msg)
        }
        elHelper.closeLoading(loading)
    }
}
const checkParent = (row: any) => {
    if (row.p_function_no) {
        hadParent.value = true
        ruleForm.son_parentNo = row.p_function_no
        ruleForm.son_selfNo = row.function_no?.slice(row.p_function_no.length) as string
        ruleForm.urlType = comFunc.nvl(row.url_type)
    } else {
        hadParent.value = false
        ruleForm.function_no = comFunc.nvl(row.function_no)
    }
}
const submitForm = async () => {
    const re = await menuForm.value.validate((valid) => valid)
    if (re) {
        if (isEdit.value) {
            submitEdit()
        } else {
            submitAdd()
        }
    } else {
        return false
    }
}
// 提交表单前获取数据
const getInputData = () => {
    if (hadParent.value) {
        fId = ruleForm.son_parentNo + ruleForm.son_selfNo
        pNo = ruleForm.son_parentNo
    } else {
        fId = ruleForm.function_no
        pNo = ''
    }
    if (ruleForm.functionShow === '展示在菜单栏') {
        isShow.value = true
    } else {
        isShow.value = false
    }
}
// 提交编辑的方法
const submitEdit = async () => {
    getInputData()
    const loading = elHelper.showLoading()
    const model: MenuDataModel = {
        function_name: ruleForm.functionName,
        function_url: ruleForm.functionUrl,
        action: ruleForm.action,
        sort_num: ruleForm.sortnum,
        url_type: ruleForm.urlType,
        icon: ruleForm.icon,
        target: ruleForm.target,
        is_menu: isShow.value,
        p_function_no: pNo
    }
    const re = await updateMenu(model)
    if (re.isSuccess) {
        dialogFormVisible.value = false
        elHelper.showSuccessMsg('编辑成功,请刷新页面,以更新左边菜单')
        getTable()
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
// 提交新增的方法
const submitAdd = async () => {
    getInputData()
    const loading = elHelper.showLoading()
    const model: MenuDataModel = {
        function_name: ruleForm.functionName,
        function_url: ruleForm.functionUrl,
        action: ruleForm.action,
        sort_num: ruleForm.sortnum,
        url_type: ruleForm.urlType,
        icon: ruleForm.icon,
        target: ruleForm.target,
        is_menu: isShow.value,
        p_function_no: pNo
    }
    const re = await addMenu(model)
    if (re.isSuccess) {
        dialogFormVisible.value = false
        elHelper.showSuccessMsg('添加成功')
        getTable()
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
const resetForm = () => {
    dialogFormVisible.value = false
}
const getTable = async () => {
    const loading = elHelper.showLoading()
    const data = await getMenu()
    if (data) {
        // 将数据结构转化为树形结构
        tableData.value = comFunc.$toTree(data, true)
        console.log(tableData)
    }
    elHelper.closeLoading(loading)
}

const closeDialog = () => {
    menuForm.value.clearValidate()
}
getTable()
</script>
<style lang="scss" scoped></style>